<template>
  <view>
    <u-modal v-model="isShow" :title="title" :title-style="{ fontWeight: 700 }" width="80%" :show-confirm-button="false" :content-style="contentStyle">
      <view class="common-model-content">
        <rich-text :nodes="content"></rich-text>
        <view class="common-model-button">
          <view :style="cancelStyle" @click="closeModal">取消</view>
          <view :style="confirmStyle" @click="confirmHandle">{{ confirmText }}</view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  name: 'authenModal',
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    content: {
      type: String,
      default: '请先完成实名认证才可使用'
    },
    confirmText: {
      type: String,
      default: '去认证'
    }
  },
  data() {
    return {
      isShow: true,
      // 内容样式
      contentStyle: {
        height: '80rpx',
        marginTop: '50rpx',
        marginBottom: '180rpx',
        color: '#666666',
        fontSize: '30rpx',
        fontWeight: '500',
        lineHeight: '80rpx',
        textAlign: 'center'
      },
      // 取消样式
      cancelStyle: {
        width: '32%',
        height: '80rpx',
        fontSize: '30rpx',
        fontWeight: 'bold',
        lineHeight: '80rpx',
        backgroundColor: '#ECECEC',
        borderRadius: '40rpx'
      },
      // 确认样式
      confirmStyle: {
        width: '32%',
        height: '80rpx',
        color: '#fff',
        fontSize: '30rpx',
        fontWeight: 'bold',
        lineHeight: '80rpx',
        backgroundColor: '#F4333C',
        borderRadius: '40rpx'
      }
    }
  },
  methods: {
    // 关闭模态框
    closeModal() {
      this.$emit('close', false)
    },
    // 去认证
    confirmHandle() {
      this.$emit('confirm', false)
    }
  }
}
</script>

<style lang="scss" scoped>
// 模态框
.common-model-content {
  .common-model-button {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
